<template>
  <div id="member" class="wrapper-fixed">
    <div class="action-bar-wrapper">
      <el-col :span="24" class="action-bar">
        <el-input v-model="searchText" placeholder="输入关键字" style="width:300px"></el-input>
        <el-select v-model="activityStatusOption" clearable placeholder="活动状态" style="margin:0 20px;">
          <el-option
            v-for="item in activityStatusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="activityTypeOption" clearable placeholder="活动方类型" style="margin:0 20px;">
          <el-option
            v-for="item in activityTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>

        <el-button type="primary" size="medium" @click="search">检索</el-button>
        <el-button type="primary" size="medium" @click="toActivityEditor(' ')" v-if="is_admin==1">添加</el-button>
      </el-col>
      <el-col class="action-bar screen">
        <el-checkbox label="活动费用" name="fee" v-model="showColumns.fee"></el-checkbox>
        <!-- <el-checkbox label="活动方类型" name="type" v-model="showColumns.type"></el-checkbox> -->
        <el-checkbox label="浏览" name="view" v-model="showColumns.view"></el-checkbox>
        <el-checkbox label="关注" name="follow" v-model="showColumns.follow"></el-checkbox>
      </el-col>
    </div>

    <!-- 列表 -->
    <el-table
      :data="tableData"
      v-loading="tableLoadingShow"
      element-loading-text="拼命加载中"
      style="width: 100%">

      <el-table-column
        prop="name"
        label="活动名称"
        width="180">
        <template slot-scope="scope">
          <div @click="showCertification(scope.row.id)" style="cursor:pointer;color:#409EFF">{{scope.row.name}}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="phone"
        label="活动时间"
        width="300"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <div style="whiteSpace:nowrap;overflow:hidden;textOverflow:ellipsis;">
            {{scope.row.start_time}} 至 {{scope.row.end_time}}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="sex_name"
        width="150"
        show-overflow-tooltip
        label="活动地点">
        <template slot-scope="scope">
          <div style="whiteSpace:nowrap;overflow:hidden;textOverflow:ellipsis;">
            {{scope.row.province}}{{scope.row.city}}{{scope.row.area}}{{scope.row.address}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="activity_conduct" label="活动状态" width="100">
        <template slot-scope="scope">
          <div>
            <el-tag type="success" v-show="scope.row.activity_status==1">报名中</el-tag>
            <el-tag type="info" v-show="scope.row.activity_status==2">进行中</el-tag>
            <el-tag type="" v-show="scope.row.activity_status==3">已结束</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="cost"
        label="活动费用"
        v-if="showColumns.fee"
        width="100"
      >
      </el-table-column>
      <!-- <el-table-column
          prop="date"
          label="活动方头像"
          width="100">
          <template slot-scope="scope">
              <div v-if="scope.row.user_info">
                  <img :src="scope.row.photo_url" alt="" style="width:60px;border-radius:50%;height:60px;object-fit:cover">
              </div>
          </template>
      </el-table-column> -->
      <el-table-column
        prop="date"
        label="活动方名称"
        width="180">
        <template slot-scope="scope">
          <div v-if="scope.row.active_party_Info">
            {{scope.row.active_party_Info.name}}
          </div>
        </template>
      </el-table-column>

      <el-table-column
        prop="type"
        label="活动方类型"
        v-if="showColumns.type"
        width="100"
      >
      </el-table-column>
      <el-table-column
        prop="browse_num"
        label="浏览"
        show-overflow-tooltip
        v-if="showColumns.view"
        width="100"
      >
      </el-table-column>

      <el-table-column
        prop="attention_num"
        label="关注"
        show-overflow-tooltip
        v-if="showColumns.follow"
        width="100"
      >
      </el-table-column>
      <el-table-column label="操作" width='150'>
        <template slot-scope="scope">
          <el-select v-model='scope.row.operation' style='width: 120px' placeholder="请选择操作">
            <el-option value='编辑' v-if="is_admin==1">
              <el-button style="width:100%" type='text' @click="toActivityEditor(scope.row.id,true)">编辑</el-button>
            </el-option>
            <el-option value='报名表' v-if="is_admin==1">
              <el-button style="width:100%" type='text' @click="toRegistrationForm(scope.row.id,false)">报名表</el-button>
            </el-option>
            <el-option value='开发票' v-if="is_admin==0">
              <el-button style="width:100%" type='text' v-if="scope.row.activity_status==3&&scope.row.is_open_invoice==0" @click="showSetReceipt(scope.row.id)">开发票</el-button>
              <el-button style="width:100%;color: #999999" type='text' v-else @click="message(scope.row.is_open_invoice)">开发票</el-button>
            </el-option>
            <el-option value='删除' v-if="is_admin==1">
              <el-button style="width:100%" type='text' @click="deleteActivity(scope.row.id,true)">删除</el-button>
            </el-option>
          </el-select>
        </template>
      </el-table-column>

    </el-table>
    <el-col :span="24" class="footer-bar">
      <div class="page-code">
        <el-pagination
          background
          :page-size="16"
          layout="prev, pager, next"
          :total="totalPage"
          @current-change="pageChange"
        >
        </el-pagination>
      </div>
    </el-col>
    <!-- 列表end -->

    <!-- 活动详情弹窗 -->
    <el-dialog title="活动详情" :visible.sync="certificationVisible" @close="initData">
      <el-form :label-position="'left'" label-width="150px">
        <el-form-item label="活动名称">
          <div>{{activityDetail.name}}</div>
        </el-form-item>
        <el-form-item label="活动开始时间">
          <div>{{activityDetail.start_time}}</div>
        </el-form-item>
        <el-form-item label="活动结束时间">
          <div>{{activityDetail.end_time}}</div>
        </el-form-item>
        <el-form-item label="活动地点">
          {{activityDetail.province}}{{activityDetail.city}}{{activityDetail.area}}{{activityDetail.address}}
        </el-form-item>
        <el-form-item label="活动状态">
          <el-tag type="success" v-show="activityDetail.activity_status==1">报名中</el-tag>
          <el-tag type="info" v-show="activityDetail.activity_status==2">进行中</el-tag>
          <el-tag type="" v-show="activityDetail.activity_status==3">已结束</el-tag>
        </el-form-item>
        <el-form-item label="活动方头像">
          <div v-if="activityDetail.active_party_Info"><img :src="activityDetail.active_party_Info.logo_url" alt=""
                                                            style="width:60px;border-radius:50%;height:60px;object-fit:cover">
          </div>
        </el-form-item>
        <el-form-item label="活动方名称">
          <div v-if="activityDetail.active_party_Info">{{activityDetail.active_party_Info.name}}</div>
        </el-form-item>
        <el-form-item label="活动方类型">
          <div v-if="activityDetail.active_party_Info">{{activityDetail.active_party_Info.type_name}}</div>
        </el-form-item>
        <el-form-item label="活动费用">
          <div>{{activityDetail.cost}}</div>
        </el-form-item>
        <!-- <el-form-item label="描述" >
            <div>{{activityDetail.desc}}</div>
        </el-form-item> -->
        <el-form-item label="浏览">
          <div>{{activityDetail.browse_num}}</div>
        </el-form-item>
        <el-form-item label="关注">
          <div>{{activityDetail.attention_num}}</div>
        </el-form-item>

        <el-form-item label="发布时间">
          <div>{{activityDetail.updated_at}}</div>
        </el-form-item>
        <el-form-item label="签到码">
          <div>
            <img :src="activityDetail.sign_img_url" style="width:200px;cursor:pointer" alt=""
                 @click="prevImg(activityDetail.sign_img_url)">
          </div>
        </el-form-item>
        <el-form-item label="活动详情">
          <div class="rich-text" v-html="activityDetail.detail">

          </div>
        </el-form-item>

        <el-form-item label="链接">
          <el-button type="primary"
                     v-clipboard:copy="activityDetail.activity_url"
                     v-clipboard:success="onCopy"
                     size="mini"
                     v-clipboard:error="onError">复制链接
          </el-button>
        </el-form-item>


      </el-form>
    </el-dialog>
    <!-- 活动详情弹窗end -->

    <!-- 图片预览 -->
    <el-dialog :visible.sync="prevImgVisible" size="tiny" width="500px">
      <div style="display:flex;justify-content:center">
        <img style="max-wdith:100%" :src="dialogImageUrl" alt="">
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click.native="downloadQrcode(dialogImageUrl)">下载二维码</el-button>
      </div>
    </el-dialog>
    <!-- 图片预览 end -->

    <!-- 开发票弹窗 -->
    <el-dialog title="开发票" :visible.sync="setReceiptShow" @close="initData">
      <div slot="footer" class="dialog-footer">
        <el-button type="primary">提交</el-button>
        <el-button @click="offSetReceipt" >取消</el-button>
      </div>
    </el-dialog>
    <!-- 开发票弹窗end -->

  </div>
</template>
<script>
  export default {
    name: 'member',
    data() {
      return {
        prevImgVisible: false,
        certificationVisible: false,//查看个性签名弹窗状态
        searchText: '',
        userAuthId: '',//选中的用户id
        is_admin: window.localStorage.getItem('is_admin'),

        activityStatusOption: '',//头部筛选的活动状态
        activityStatusOptions: [
          {label: '全部', value: -1},
          {label: '报名中', value: 1},
          {label: '进行中', value: 2},
          {label: '已结束', value: 3},

        ],
        activityTypeOption: '',//头部筛选的活动方类型
        activityTypeOptions: [
          {label: '全部', value: -1},
          {label: '官方', value: 1},
          {label: '非官方', value: 0}
        ],

        showColumns: {
          fee: false,
          type: false,
          view: false,
          follow: false
        },
        dialogImageUrl: '',

        tableData: [{active_party_Info: ''}],
        activityDetail: {active_party_Info: {}},//活动详情
        page: 1,
        totalPage: 0,

        setReceiptShow: false,//开发票
        tableLoadingShow: false
      }
    },
    watch: {},
    methods: {
      onCopy(e) {
        this.$message({
          type: 'success',
          message: '复制成功'
        })
      },
      onError(erro) {
        this.$message({
          type: 'error',
          message: '复制失败'
        })
      },
      search() {
        this.tableLoadingShow = true;
        this.page = 1;
        this.getActivityList()
      },
      prevImg(url) {
        this.dialogImageUrl = url;
        this.prevImgVisible = true;
      },
      downloadIamge(imgsrc, name) {//下载图片地址和图片名
        var image = new Image();
        // 解决跨域 Canvas 污染问题
        image.setAttribute("crossOrigin", "anonymous");
        image.onload = function () {
          var canvas = document.createElement("canvas");
          canvas.width = image.width;
          canvas.height = image.height;
          var context = canvas.getContext("2d");
          context.drawImage(image, 0, 0, image.width, image.height);
          var url = canvas.toDataURL("image/jpg"); //得到图片的base64编码数据

          var a = document.createElement("a"); // 生成一个a元素
          var event = new MouseEvent("click"); // 创建一个单击事件
          a.download = name || "photo"; // 设置图片名称
          a.href = url; // 将生成的URL设置为a.href属性
          a.dispatchEvent(event); // 触发a的单击事件
        };
        image.src = imgsrc;
      },
      downloadQrcode(url) {
        this.downloadIamge(url, 'pic')
      },
      message(id){
        if (id==0){
          this.$message.error("当前活动未结束")
        } else {
          this.$message.error("当前活动已提交发票请求！")
        }

      },
      async getActivityList() {
        //获取列表
        let params = {
          page: this.page,
          limit: 16,
          keyword: this.searchText,
          status: this.activityStatusOption == -1 ? '' : this.activityStatusOption,
          is_official: this.activityTypeOption == -1 ? '' : this.activityTypeOption
        }
        let res = await this.$api.getActivityList(
          params);
        if (res.data.level == 'success') {
          this.tableData = res.data.data || [{active_party_Info: ''}];
          this.totalPage = res.data.page_info.total;
        }
        this.tableLoadingShow = false;
      },
      async getActivityDetail(id) {
        //获取活动详情
        let res = await this.$api.getActivityDetail({id: id});
        if (res.data.level == 'success' && res.data.data) {
          let data = res.data.data;
          this.activityDetail = data || {active_party_Info: {}}
        }
      },
      pageChange(e) {
        //翻页
        this.page = e;
        this.getActivityList();
      },
      async deleteActivity(id) {
        //封号
        let judge = null;
        let tit = '删除该活动?';
        try {
          judge = await this.$confirm(tit, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        } catch (error) {
          judge = 'cancel'
        }
        if (judge == 'confirm') {
          this.delActivity(id)
        }
        console.log(judge)
      },
      async delActivity(id) {
        let res = await this.$api.delActivity({id: id})
        if (res.data.level == 'success') {
          this.$message.success(res.data.message);
          this.getActivityList();
        } else {
          this.$message.error(res.data.message)
        }
      },

      showCertification(id) {
        //显示活动详情
        this.certificationVisible = true;
        this.getActivityDetail(id)
      },
      toActivityEditor(id) {
        this.$router.push({name: 'Activity_editor', query: {id: id}})
      },
      toRegistrationForm(id) {
        this.$router.push({name: 'Activity_registration_form', query: {id: id}})
      },
      showSetReceipt(id){
        // this.setReceiptShow = true;
        this.$confirm('是否提交开发票申请?', '提示', {
          confirmButtonText: '提交',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const res = await this.$api.submitOpenInvoiceApply({activity_id:id})
          if (res.data.level == 'success'){
            this.$message({
              type: 'success',
              message: res.data.message
            });
          }else {
            this.$message({
              type: 'warning',
              message: res.data.message
            });
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消成功!'
          });
        });
      },
      offSetReceipt(){
        this.setReceiptShow = false;

      },
      initData() {

      }

    },
    mounted() {
      this.getActivityList()
    },
  }
</script>
<style lang="scss" scoped>
  .screen {
    margin-top: -10px !important;
  }

  .action-bar-wrapper {
    position: sticky;
    z-index: 1;
    top: -10px;
  }

  .action-bar {
    background-color: #f2f2f2;

    height: 60px;
    margin: 10px 0px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding-left: 20px;

    .action-bar-input {
      width: 250px;
      margin-right: 14px;
    }

    .task-form-text {
      color: #666666;
    }
  }

  .el-table-style {
    width: 100%;
    border: 1px solid #f2f2f2;
  }

  .footer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f2f2f2;
    padding: 8px;
    margin: 10px 0px;
    box-sizing: border-box;
  }

  .dialog-footer {
    text-align: center;
  }

  .executorList {
    display: flex;
    flex-wrap: wrap;

    div {
      margin: 10px;
      border: 1px solid #eee;
      border-radius: 5px;
      padding: 5px 10px;
    }
  }
</style>
<style>
  .rich-text img {
    max-width: 80%;
  }
</style>
